import React, { PureComponent } from 'react'
import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native'
import screen from '../../../../common/screen'
import { Title, Price, Description } from '../../../../widget/Text'
import { BoxShadow } from 'react-native-shadow'

type Props = {
    info: Object,//单个拼团商品的数据
    OnPress: Function,//点击单个商品的事件
}

class GroupGridItem extends PureComponent<{}>{
    render() {
        let info = this.props.info
        let title = info.title//商品的标题
        let introduce = info.description//商品的描述
        let price = info.price//商品的价格
        let imageUrl = info.imageUrl//商品的图像

        //onPress={()=>this.props.onPress(info.id)}
        return (
            <BoxShadow setting={shadow}>
                <TouchableOpacity style={styles.contain} onPress={() => this.props.OnPress(info.id)} >
                    <Image style={styles.image} resizeMode='contain' source={{ uri: this.props.info.imageUrl, cache: 'force-cache' }} />
                    <View style={styles.textView}>
                        <Title numberOfLines={1}>{title}</Title>
                        <Description numberOfLines={1}>{introduce}</Description>
                        <Price style={{ alignSelf: 'flex-start', marginTop: 3 }} >¥{price}</Price>
                    </View>
                </TouchableOpacity>
            </BoxShadow>
        );
    }
}
const shadow = {
    width: screen.width * 0.306,
    height: screen.width * 0.406,
    color: "#D03F3F",
    border: 2,
    radius: 6,
    opacity: 0.79,
    x: 2,
    y: 2,
    style: { marginVertical: 5 }
}

const styles = StyleSheet.create({
    contain: {
        width: screen.width * 0.306,
        height: screen.width * 0.406,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'column',
        borderRadius: 6,
        padding: 10,
        backgroundColor: '#FFFFFF',
    },
    image: {
        width: screen.width * 0.194,
        height: screen.width * 0.194,
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 8,
    },
    textView: {
        //margin:5,
        marginTop: 6,
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
    },

})
export default GroupGridItem 